<script setup lang="ts">
import { useStoreDetil } from "./utils/hook";
import arrowLeft from "@iconify-icons/ep/arrow-left";
import { usePublicHooks } from "../../hooks";
import { dealDataExcept } from "@/utils/common";
import { DictTag } from "@/components/common/DictTag";

defineOptions({
  name: "StoreManagementDetail"
});

const { activeName, columns, storeInfo, goBack, handleClick, openDialog } =
  useStoreDetil();
const { switchStyle } = usePublicHooks();
</script>

<template>
  <div class="main" style="box-shadow: none">
    <el-card class="mb-3">
      <template #header>
        <div
          class="card-header flex items-center cursor-pointer"
          @click="goBack(-1)"
        >
          <IconifyIconOffline :icon="arrowLeft" class="mr-1" />
          门店信息
        </div>
        <el-button type="primary" @click="openDialog('编辑', storeInfo)">
          编辑
        </el-button>
      </template>
      <el-form label-width="100px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="门店编码" prop="name">
              {{ storeInfo.storeCode }}
            </el-form-item>
          </el-col>
          <el-col :span="19">
            <el-form-item label="门店名称" prop="name">
              {{ storeInfo.storeName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="门店状态" prop="name">
              <el-switch
                v-model="storeInfo.status"
                :active-value="0"
                :inactive-value="1"
                inline-prompt
                active-text="营业"
                inactive-text="撤铺"
                :style="switchStyle"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属品牌" prop="name">
              {{ storeInfo.brandName }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="经营属性" prop="name">
              <DictTag dict-type="BUSINES_ATR" :dict-value="storeInfo?.type" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属区域" prop="name">
              {{ storeInfo.areaName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="门店联系人" prop="name">
              {{ storeInfo.contacts }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="联系方式" prop="name">
              {{ storeInfo.contact }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="门店地址" prop="name">
              {{ storeInfo.address }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="小娃娃均价" prop="name">
              {{ dealDataExcept(storeInfo.avgPrice) }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card v-if="storeInfo.depositoryList?.length > 0" class="mb-3">
      <template #header>
        <div class="card-header">仓库信息</div>
      </template>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in storeInfo.depositoryList"
          :key="index"
          :label="item.depositoryName"
          :name="item.depositoryName"
        >
          <el-form label-width="100px">
            <el-row>
              <el-col :span="5">
                <el-form-item label="仓库编码" prop="name">
                  {{ item.depositoryCode }}
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="仓库名称" prop="name">
                  {{ item.depositoryName }}
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="仓库类型" prop="name">
                  <DictTag dict-type="HOUSE_TYPE" :dict-value="item?.type" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="状态" prop="status">
                  <el-switch
                    v-model="item.status"
                    :active-value="0"
                    :inactive-value="1"
                    inline-prompt
                    active-text="启用"
                    inactive-text="禁用"
                    :style="switchStyle"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <el-form-item label="联系人" prop="name">
                  {{ item.contacts }}
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="联系方式" prop="name">
                  {{ item.contact }}
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="地址" prop="name">
                  {{ item.address }}
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="备注" prop="name">
                  {{ item.des }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="mb-3">
      <template #header>
        <div class="card-header">预警金额上限</div>
      </template>
      <pure-table
        :data="storeInfo.storeWarningTopList"
        :columns="columns"
        border
        align-whole="center"
        height="360"
        :header-cell-style="{
          color: 'var(--el-text-color-primary)'
        }"
      />
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
}
:deep(.el-form-item__label) {
  color: #74714f;
}
:deep(.el-form-item__content) {
  font-weight: bold;
  color: #29281c;
}
:deep(.el-tabs__item) {
  color: #b2b08f;
}
:deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary);
}
:deep(.el-tabs__item:hover) {
  color: var(--el-color-primary);
}
:deep(.el-card__header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}
</style>
